<template>
  <div class="novel-detail-page">
    <!-- 顶部信息区域 -->
    <div class="novel-header">
      <div class="novel-cover-section">
        <div class="cover-wrapper">
          <img 
            :src="currentNovel?.cover" 
            :alt="currentNovel?.title"
            class="novel-cover"
            @error="handleImageError"
          />
          <div v-if="currentNovel?.isVip" class="vip-badge">VIP</div>
        </div>
      </div>
      
      <div class="novel-info-section">
        <h1 class="novel-title">{{ currentNovel?.title }}</h1>
        <div class="novel-meta">
          <span class="author">{{ currentNovel?.author }}</span>
          <span class="category">{{ currentNovel?.category ? categoryMap[currentNovel.category] : '' }}</span>
          <span class="status" :class="currentNovel?.status">
            {{ currentNovel?.status ? statusMap[currentNovel.status] : '' }}
          </span>
        </div>
        
        <div class="novel-stats">
          <div class="stat-item">
            <span class="stat-value">{{ formatNumber(currentNovel?.wordCount) }}</span>
            <span class="stat-label">字数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ currentNovel?.chapterCount }}</span>
            <span class="stat-label">章节</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ currentNovel?.rating }}</span>
            <span class="stat-label">评分</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ formatNumber(currentNovel?.viewCount) }}</span>
            <span class="stat-label">阅读</span>
          </div>
        </div>

        <div class="novel-rating">
          <div class="stars">
            <span 
              v-for="i in 5" 
              :key="i"
              class="star"
              :class="{ active: i <= Math.round(currentNovel?.rating || 0) }"
            >
              ★
            </span>
          </div>
          <span class="rating-text">{{ currentNovel?.rating }} ({{ formatNumber(currentNovel?.ratingCount) }}人评价)</span>
        </div>

        <div class="novel-tags">
          <span 
            v-for="tag in currentNovel?.tags" 
            :key="tag"
            class="tag"
          >
            {{ tag }}
          </span>
        </div>

        <div class="action-buttons">
          <button 
            class="btn primary start-reading"
            @click="startReading"
            :disabled="loading"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5v14l11-7z"/>
            </svg>
            {{ hasReadingHistory ? '继续阅读' : '开始阅读' }}
          </button>
          
          <button 
            class="btn secondary add-bookshelf"
            @click="toggleBookshelf"
            :disabled="loading"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
            </svg>
            {{ isInBookshelf ? '移出书架' : '加入书架' }}
          </button>

          <button class="btn secondary share-btn" @click="shareNovel">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
            </svg>
            分享
          </button>
        </div>
      </div>
    </div>

    <!-- 更新信息 -->
    <div v-if="currentNovel?.lastChapterTitle" class="update-info card">
      <div class="update-content">
        <div class="update-text">
          <span class="update-label">最新章节：</span>
          <span class="chapter-title">{{ currentNovel.lastChapterTitle }}</span>
        </div>
        <div class="update-time">{{ formatTime(currentNovel.lastChapterTime) }}更新</div>
      </div>
    </div>

    <!-- 标签页导航 -->
    <div class="tab-navigation">
      <div class="tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
          <span v-if="tab.count" class="tab-count">({{ tab.count }})</span>
        </button>
      </div>
    </div>

    <!-- 标签页内容 -->
    <div class="tab-content">
      <!-- 简介 -->
      <div v-show="activeTab === 'intro'" class="intro-content">
        <div class="card">
          <h3>作品简介</h3>
          <div class="description">
            <p>{{ currentNovel?.description }}</p>
          </div>
          
          <!-- 作者信息 -->
          <div class="author-info">
            <h4>作者信息</h4>
            <div class="author-card">
              <div class="author-avatar">
                <img src="https://avatars.githubusercontent.com/u/1?v=4" alt="作者头像" />
              </div>
              <div class="author-details">
                <div class="author-name">{{ currentNovel?.author }}</div>
                <div class="author-stats">
                  <span>作品数：5</span>
                  <span>粉丝数：12.8万</span>
                </div>
              </div>
              <button class="btn secondary follow-btn">+ 关注</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 目录 -->
      <div v-show="activeTab === 'chapters'" class="chapters-content">
        <div class="card">
          <div class="chapters-header">
            <h3>章节目录</h3>
            <div class="chapters-info">
              <span>共{{ chapters.length }}章</span>
              <button class="sort-btn" @click="toggleChapterSort">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
                </svg>
                {{ chapterSortDesc ? '倒序' : '正序' }}
              </button>
            </div>
          </div>
          
          <div class="chapters-list">
            <div 
              v-for="chapter in sortedChapters" 
              :key="chapter.id"
              class="chapter-item"
              :class="{ 
                vip: chapter.isVip, 
                free: chapter.isFree,
                read: isChapterRead(chapter.id),
                locked: !userStore.canAccessChapter(chapter),
                purchased: chapter.isVip && userStore.user?.purchasedChapters?.includes(chapter.id)
              }"
              @click="goToChapter(chapter)"
            >
              <div class="chapter-info">
                <span class="chapter-title">{{ chapter.title }}</span>
                <div class="chapter-meta">
                  <span class="chapter-number">第{{ chapter.chapterNumber }}章</span>
                  <span class="word-count">{{ formatNumber(chapter.wordCount) }}字</span>
                  <span v-if="!userStore.canAccessChapter(chapter)" class="price">
                    {{ chapter.price }}币
                  </span>
                  <span v-else-if="chapter.isVip && userStore.isVip" class="status-tag vip-free">
                    VIP免费
                  </span>
                  <span v-else-if="chapter.isVip && userStore.user?.purchasedChapters?.includes(chapter.id)" class="status-tag purchased">
                    已购买
                  </span>
                </div>
              </div>
              
              <div class="chapter-actions">
                <span v-if="chapter.isVip" class="vip-tag">VIP</span>
                <span v-if="chapter.isFree" class="free-tag">免费</span>
                <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <div v-show="activeTab === 'comments'" class="comments-content">
        <div class="card">
          <div class="comments-header">
            <h3>读者评论</h3>
            <button class="btn primary write-comment" @click="showCommentForm = !showCommentForm">
              写评论
            </button>
          </div>

          <!-- 评论表单 -->
          <div v-if="showCommentForm" class="comment-form">
            <div class="rating-input">
              <span>评分：</span>
              <div class="stars-input">
                <span 
                  v-for="i in 5" 
                  :key="i"
                  class="star"
                  :class="{ active: i <= commentRating }"
                  @click="commentRating = i"
                >
                  ★
                </span>
              </div>
            </div>
            <textarea 
              v-model="commentContent"
              placeholder="写下你的评论..."
              rows="4"
            ></textarea>
            <div class="form-actions">
              <button class="btn secondary" @click="showCommentForm = false">取消</button>
              <button class="btn primary" @click="submitComment" :disabled="!commentContent.trim()">
                发表评论
              </button>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div 
              v-for="comment in comments" 
              :key="comment.id"
              class="comment-item"
            >
              <div class="comment-avatar">
                <img :src="comment.userAvatar || '/default-avatar.png'" :alt="comment.userName" />
              </div>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="user-name">{{ comment.userName }}</span>
                  <div v-if="comment.rating" class="comment-rating">
                    <span 
                      v-for="i in 5" 
                      :key="i"
                      class="star"
                      :class="{ active: i <= comment.rating }"
                    >
                      ★
                    </span>
                  </div>
                  <span class="comment-time">{{ formatTime(comment.createdAt) }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-actions">
                  <button class="action-btn" @click="likeComment(comment.id)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8 0-.83-.67-1.5-1.5-1.5H14l.86-4.11c.08-.37.04-.76-.11-1.06-.23-.46-.69-.73-1.18-.73-.31 0-.59.13-.8.36L9.83 8H7c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h10.35c.82 0 1.54-.5 1.85-1.27l2.83-7.85z"/>
                    </svg>
                    {{ comment.likeCount }}
                  </button>
                  <button class="action-btn">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h11c.55 0 1-.45 1-1z"/>
                    </svg>
                    回复
                  </button>
                </div>
              </div>
            </div>

            <!-- 加载更多 -->
            <div v-if="comments.length > 0" class="load-more">
              <button class="btn secondary" @click="loadMoreComments">加载更多评论</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐 -->
      <div v-show="activeTab === 'recommend'" class="recommend-content">
        <div class="card">
          <h3>相关推荐</h3>
          <div class="recommend-list">
            <div 
              v-for="item in recommendations" 
              :key="item.novel.id"
              class="recommend-item"
              @click="goToNovel(item.novel.id)"
            >
              <img :src="item.novel.cover" :alt="item.novel.title" class="recommend-cover" />
              <div class="recommend-info">
                <h4 class="recommend-title">{{ item.novel.title }}</h4>
                <p class="recommend-author">{{ item.novel.author }}</p>
                <p class="recommend-desc">{{ item.novel.description.slice(0, 60) }}...</p>
                <div class="recommend-stats">
                  <span>{{ formatNumber(item.novel.wordCount) }}字</span>
                  <span>{{ item.novel.rating }}分</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useNovelStore } from '@/stores/novel'
import { useUserStore } from '@/stores/user'
import type { Chapter, Comment } from '@/types'

const route = useRoute()
const router = useRouter()
const novelStore = useNovelStore()
const userStore = useUserStore()

// 响应式数据
const activeTab = ref('intro')
const showCommentForm = ref(false)
const commentContent = ref('')
const commentRating = ref(5)
const chapterSortDesc = ref(false)

// 计算属性
const { 
  currentNovel, 
  chapters, 
  comments, 
  recommendations, 
  loading 
} = storeToRefs(novelStore)

const isInBookshelf = computed(() => {
  return userStore.bookshelf.some(item => item.novelId === currentNovel.value?.id)
})

const hasReadingHistory = computed(() => {
  return userStore.readingHistory.some(item => item.novelId === currentNovel.value?.id)
})

const sortedChapters = computed(() => {
  const sorted = [...chapters.value]
  return chapterSortDesc.value ? sorted.reverse() : sorted
})

const tabs = computed(() => [
  { key: 'intro', label: '简介', count: null },
  { key: 'chapters', label: '目录', count: chapters.value.length },
  { key: 'comments', label: '评论', count: comments.value.length },
  { key: 'recommend', label: '推荐', count: recommendations.value.length }
])

// 映射数据
const categoryMap = {
  fantasy: '玄幻',
  urban: '都市',
  romance: '言情',
  historical: '历史',
  scifi: '科幻',
  mystery: '悬疑',
  military: '军事',
  game: '游戏'
}

const statusMap = {
  ongoing: '连载中',
  completed: '已完结',
  paused: '暂停'
}

// 方法
const formatNumber = (num?: number) => {
  if (!num) return '0'
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

const formatTime = (time?: string) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 30) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = '/default-cover.png'
}

const startReading = () => {
  if (!currentNovel.value || chapters.value.length === 0) return
  
  // 检查是否有阅读历史
  const history = userStore.readingHistory.find(item => item.novelId === currentNovel.value!.id)
  const chapterId = history?.chapterId || chapters.value[0].id
  
  router.push(`/reader/${currentNovel.value.id}/${chapterId}`)
}

const toggleBookshelf = async () => {
  if (!currentNovel.value) return
  
  if (isInBookshelf.value) {
    await userStore.removeFromBookshelf(currentNovel.value.id)
  } else {
    await userStore.addToBookshelf(currentNovel.value.id)
  }
}

const shareNovel = () => {
  if (navigator.share) {
    navigator.share({
      title: currentNovel.value?.title,
      text: currentNovel.value?.description,
      url: window.location.href
    })
  } else {
    navigator.clipboard.writeText(window.location.href)
    alert('链接已复制到剪贴板')
  }
}

const toggleChapterSort = () => {
  chapterSortDesc.value = !chapterSortDesc.value
}

const isChapterRead = (chapterId: string) => {
  return userStore.readingHistory.some(item => item.chapterId === chapterId)
}

const goToChapter = (chapter: Chapter) => {
  const accessInfo = userStore.getChapterAccessInfo(chapter)
  
  if (!accessInfo.canAccess && accessInfo.needPurchase) {
    const confirmMessage = userStore.isVip 
      ? `此章节需要${accessInfo.price}书币，VIP用户应该免费访问，是否购买？`
      : `此章节需要${accessInfo.price}书币，是否购买？`
      
    if (confirm(confirmMessage)) {
      userStore.buyChapter(chapter.id, accessInfo.price).then(success => {
        if (success) {
          router.push(`/reader/${currentNovel.value!.id}/${chapter.id}`)
        } else {
          alert('余额不足，请先充值')
        }
      })
    }
  } else {
    router.push(`/reader/${currentNovel.value!.id}/${chapter.id}`)
  }
}

const submitComment = async () => {
  if (!commentContent.value.trim() || !currentNovel.value) return
  
  novelStore.addComment({
    novelId: currentNovel.value.id,
    userId: userStore.user?.id || 'anonymous',
    userName: userStore.user?.nickname || '匿名用户',
    userAvatar: userStore.user?.avatar,
    content: commentContent.value,
    rating: commentRating.value,
    likeCount: 0,
    replyCount: 0
  })
  
  commentContent.value = ''
  commentRating.value = 5
  showCommentForm.value = false
  alert('评论发表成功！')
}

const likeComment = async (commentId: string) => {
  await novelStore.likeComment(commentId)
}

const loadMoreComments = () => {
  novelStore.loadMoreComments(currentNovel.value!.id)
}

const goToNovel = (novelId: string) => {
  router.push(`/novel/${novelId}`)
}

// 生命周期
onMounted(async () => {
  const novelId = route.params.id as string
  if (novelId) {
    await novelStore.fetchNovelDetail(novelId)
  }
})

// 监听路由变化
watch(() => route.params.id, async (newId) => {
  if (newId) {
    await novelStore.fetchNovelDetail(newId as string)
  }
})
</script>

<style lang="scss" scoped>
.novel-detail-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding-bottom: 40px;
}

.novel-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  display: flex;
  gap: 24px;
  margin-bottom: 24px;

  .novel-cover-section {
    flex-shrink: 0;

    .cover-wrapper {
      position: relative;
      width: 120px;
      height: 160px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

      .novel-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .vip-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: linear-gradient(45deg, #ff6b6b, #ff8e53);
        color: white;
        font-size: 10px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 10px;
      }
    }
  }

  .novel-info-section {
    flex: 1;
    min-width: 0;

    .novel-title {
      font-size: 24px;
      font-weight: 700;
      margin: 0 0 12px 0;
      color: white;
    }

    .novel-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      font-size: 14px;

      .author {
        color: rgba(255, 255, 255, 0.9);
      }

      .category {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
      }

      .status {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        
        &.ongoing {
          background: #4CAF50;
        }
        
        &.completed {
          background: #2196F3;
        }
        
        &.paused {
          background: #FF9800;
        }
      }
    }

    .novel-stats {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;

      .stat-item {
        text-align: center;

        .stat-value {
          display: block;
          font-size: 18px;
          font-weight: 600;
          color: white;
        }

        .stat-label {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }

    .novel-rating {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      .stars {
        .star {
          color: #ddd;
          font-size: 16px;
          
          &.active {
            color: #ffd700;
          }
        }
      }

      .rating-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .novel-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;

      .tag {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
      }
    }

    .action-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;

      .btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;

        &.primary {
          background: linear-gradient(45deg, #ff6b6b, #ff8e53);
          color: white;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
          }
        }

        &.secondary {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.3);
          
          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }
  }
}

.update-info {
  margin: 0 24px 24px;
  padding: 16px;

  .update-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .update-text {
      .update-label {
        color: var(--text-secondary);
        margin-right: 8px;
      }

      .chapter-title {
        color: var(--primary-color);
        font-weight: 500;
      }
    }

    .update-time {
      color: var(--text-tertiary);
      font-size: 14px;
    }
  }
}

.tab-navigation {
  margin: 0 24px;
  border-bottom: 1px solid var(--border-color);

  .tabs {
    display: flex;

    .tab-item {
      padding: 16px 24px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-secondary);
      border-bottom: 3px solid transparent;
      transition: all 0.3s ease;

      &:hover {
        color: var(--primary-color);
      }

      &.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
      }

      .tab-count {
        color: var(--text-tertiary);
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
}

.tab-content {
  margin: 24px;

  .card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);

    h3 {
      margin: 0 0 20px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }

    h4 {
      margin: 20px 0 12px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }
  }
}

// 简介相关样式
.description {
  p {
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 16px;
  }
}

.author-info {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;

  .author-card {
    display: flex;
    align-items: center;
    gap: 16px;

    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .author-details {
      flex: 1;

      .author-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .author-stats {
        display: flex;
        gap: 16px;
        font-size: 14px;
        color: var(--text-secondary);
      }
    }

    .follow-btn {
      padding: 8px 16px;
      font-size: 14px;
    }
  }
}

// 章节相关样式
.chapters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .chapters-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);

    .sort-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      
      &:hover {
        background: var(--bg-tertiary);
      }
    }
  }
}

.chapters-list {
  .chapter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 8px;

    &:hover {
      background: var(--bg-secondary);
      transform: translateX(4px);
    }

    &.read {
      opacity: 0.6;

      .chapter-title {
        color: var(--text-tertiary);
      }
    }

    &.vip {
      border-left: 4px solid #ff6b6b;
    }

    &.locked {
      opacity: 0.6;
      background: #f5f5f5;

      .chapter-title {
        color: var(--text-tertiary);
      }
    }

    &.purchased {
      border-left: 4px solid #1890ff;

      .chapter-title {
        color: #1890ff;
      }
    }

    .chapter-info {
      flex: 1;
      min-width: 0;

      .chapter-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chapter-meta {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: var(--text-secondary);

        .price {
          color: #ff6b6b;
          font-weight: 600;
        }

        .status-tag {
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 10px;
          font-weight: bold;

          &.vip-free {
            background: #52c41a;
            color: white;
          }

          &.purchased {
            background: #1890ff;
            color: white;
          }
        }
      }
    }

    .chapter-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      .vip-tag {
        background: linear-gradient(45deg, #ff6b6b, #ff8e53);
        color: white;
        font-size: 10px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 10px;
      }

      .free-tag {
        background: #4CAF50;
        color: white;
        font-size: 10px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 10px;
      }

      .arrow-icon {
        color: var(--text-tertiary);
      }
    }
  }
}

// 评论相关样式
.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .write-comment {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.comment-form {
  background: var(--bg-secondary);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;

  .rating-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;

    .stars-input {
      .star {
        color: #ddd;
        font-size: 20px;
        cursor: pointer;
        transition: color 0.2s;
        
        &.active,
        &:hover {
          color: #ffd700;
        }
      }
    }
  }

  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 16px;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
    }
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .btn {
      padding: 8px 16px;
      font-size: 14px;
    }
  }
}

.comments-list {
  .comment-item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);

    &:last-child {
      border-bottom: none;
    }

    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .comment-content {
      flex: 1;
      min-width: 0;

      .comment-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        .user-name {
          font-weight: 600;
          color: var(--text-primary);
        }

        .comment-rating {
          .star {
            color: #ddd;
            font-size: 12px;
            
            &.active {
              color: #ffd700;
            }
          }
        }

        .comment-time {
          font-size: 12px;
          color: var(--text-tertiary);
          margin-left: auto;
        }
      }

      .comment-text {
        color: var(--text-primary);
        line-height: 1.6;
        margin-bottom: 12px;
      }

      .comment-actions {
        display: flex;
        gap: 16px;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 4px;
          border: none;
          background: none;
          color: var(--text-secondary);
          font-size: 12px;
          cursor: pointer;
          transition: color 0.2s;

          &:hover {
            color: var(--primary-color);
          }
        }
      }
    }
  }

  .load-more {
    text-align: center;
    margin-top: 24px;

    .btn {
      padding: 10px 24px;
    }
  }
}

// 推荐相关样式
.recommend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;

  .recommend-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: var(--bg-secondary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .recommend-cover {
      width: 60px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .recommend-info {
      flex: 1;
      min-width: 0;

      .recommend-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .recommend-author {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 0 0 8px 0;
      }

      .recommend-desc {
        font-size: 12px;
        color: var(--text-tertiary);
        line-height: 1.4;
        margin: 0 0 8px 0;
      }

      .recommend-stats {
        display: flex;
        gap: 12px;
        font-size: 11px;
        color: var(--text-tertiary);
      }
    }
  }
}

// 加载状态
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
  }

  p {
    color: var(--text-secondary);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .novel-header {
    padding: 16px;
    flex-direction: column;
  text-align: center;

    .novel-cover-section {
      align-self: center;
    }

    .novel-info-section {
      .novel-stats {
        justify-content: center;
      }

      .action-buttons {
        justify-content: center;
      }
    }
  }

  .tab-content {
    margin: 16px;

    .card {
      padding: 16px;
    }
  }

  .chapters-list .chapter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    .chapter-actions {
      align-self: flex-end;
    }
  }

  .recommend-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .novel-header {
    padding: 12px;

    .novel-cover-section .cover-wrapper {
      width: 100px;
      height: 133px;
    }

    .novel-info-section {
      .novel-title {
        font-size: 20px;
      }

      .novel-stats {
        gap: 16px;

        .stat-item .stat-value {
          font-size: 16px;
        }
      }

      .action-buttons .btn {
        padding: 8px 16px;
        font-size: 13px;
      }
    }
  }

  .tab-navigation .tabs {
    overflow-x: auto;
    white-space: nowrap;

    .tab-item {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
}
</style> 